<body class="app" data-ad="true">
<style type="text/css">
.input-upload-image {
    opacity:0;
    z-index:1;
    border:none;
    -webkit-opacity:0;
    width:75px;
    height:75px;
    position:absolute;
}
.events-pointer-none {
    pointer-events:none;
    cursor:pointer;
}
</style>
<section class="app-content">
	<section class="page page-index noline" data-plugin-type="info_front">

        <div class="top-bar">个人信息<a href="<?php echo $this->url('my', array('action'=>'home'));?>" class="btn-t-back"></a></div>
        <ul class="i-tab-list">
            <li>
				<a href="javascript:;" class="ico-right-s btn-arr-r">
					<input type = "file" accept="image/*" capture="camera" id="img" class="input-upload-image"/>
					<img id="imgInfo" class="upload-btn events-pointer-none" src="<?php echo "{$this->user['user_thumb_image']}" ;?>">
				</a>头 像
            </li>
            <li><a href="javascript:;" class="ico-right-s btn-arr-r">修改</a><span id="username" class="editxt"><?php echo "{$this->user['user_name']}"; ?></span></li>
        </ul>
	</section>
    <!-- 底部menu-->
   <?php echo $this->partial('public/menu.phtml'); ?>
</section>

<script type="text/javascript">
'use strict';
var result1 = '',result2 = '',result3 = '',result4 = '' ,result5 = '',result6 = '' ;

var upImg={};
upImg.url="/my/save-img";
upImg.method="post";
upImg.data={};
upImg.dataType="json";
upImg.submit=function(){
	$.ajax({
         url:upImg.url,
         type:upImg.method,
         data:upImg.data,
         dataType:upImg.dataType,
         success:function(rs){
			if(rs.status=="success"){
				alert("保存成功！");
			}else{
				alert("保存失败！");
			}
         }
	});     
}  
$("#img").change(function(){
        var reader = new FileReader();
        reader.onload = function (e) {
			var filename=$("#img").val();
			var strFileName=filename.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1");  //正则表达式获取文件名，不带后缀
			var fileExt=filename.replace(/.+\./,"");   //正则表达式获取后缀

			var compressImg = compress( this.result,fileSize);
			upImg.data.filename=strFileName;
			upImg.data.fileExt=fileExt;    
        };

        reader.readAsDataURL(this.files[0]);

        result1 = this.files[0].size + ' Bytes';

        var fileSize = Math.round(this.files[0].size/1024/1024) ;

        var compress = function (res,fileSize) {
            
            var img = new Image(),
                maxW = 200; //设置最大宽度

            img.onload = function () {
                var cvs = document.createElement( 'canvas'),
                    ctx = cvs.getContext( '2d');

                result2 = img.width;
                result3 = img.height;

                if(img.width > maxW) {
                    img.height *= maxW / img.width;
                    img.width = maxW;
                }

                cvs.width = img.width;
                cvs.height = img.height;

                result4 = cvs.width;
                result5 = cvs.height;

                ctx.clearRect(0, 0, cvs.width, cvs.height);
                ctx.drawImage(img, 0, 0, img.width, img.height);

                var compressRate = getCompressRate(1,fileSize);

                var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);

                upImg.data.fileCode=dataUrl;
                upImg.submit();
                
                document.getElementById('imgInfo').setAttribute('src',dataUrl);
			};

            img.src = res;
        };

        function getCompressRate(allowMaxSize,fileSize){ //计算压缩比率，size单位为MB
            var compressRate = 1;

            if(fileSize/allowMaxSize > 4){
               compressRate = 0.5;
            } else if(fileSize/allowMaxSize >3){
               compressRate = 0.6;
            } else if(fileSize/allowMaxSize >2){
               compressRate = 0.7;
            } else if(fileSize > allowMaxSize){
               compressRate = 0.8;
            } else{
               compressRate = 0.9;
            }

            result6 = compressRate;

            return compressRate;
        }
});
    
</script>


<script type="text/javascript">
var editTxt={};
editTxt.editInput=$("<input type='text',vlaue=''/>");
editTxt.id=".editxt";
editTxt.url="/my/update-user";
editTxt.method="post";
editTxt.data={};
editTxt.dataType="json";
editTxt.submit=function(){
	$.ajax({
         url:editTxt.url,
         type:editTxt.method,
         data:editTxt.data,
         dataType:editTxt.dataType,
         success:function(rs){
			if(rs.status=="success"){
				alert("保存成功！");
			}else{
				alert("保存失败！");
			}
         }
	});     
}

$(editTxt.id).click(function(){
        var $el = $(this);
        var content = $el.text();
        var editInput = editTxt.editInput;
        var attrName = $el.attr("id");
        editInput.val(content);
        $el.html(editInput);
        //阻止input内容被清空
        editInput.click(function () { return false; }); 
        //获取焦点 
        editInput.trigger("focus"); 
        //文本框失去焦点后提交内容，重新变为文本 
        editInput.unbind("blur");
        editInput.blur(function () { 
			var nContent = $(this).val(); 
			//判断文本有没有修改 
			if (nContent != content) { 
				$el.html(nContent);
				if('username'==attrName){
					editTxt.data.username=nContent;
				}
				editTxt.submit();
			}else{
				$el.html(content);
			}

        });
});
</script>




